<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> {{ title }} </h1>
        <p v-for="item in list"> {{item }}</p>
        <button @click="test1">Test GET</button>
        <button @click="test2">Test POST</button>
        <button @click="test3">Test Delete</button>
        <button @click="test4">Test PUT</button>
    </div>
</body>
<script>
// 观察每个 URL 高度相似，优化思路
axios.defaults.baseURL='http://localhost:9090';
// 在请求头加个 token 身份信息 JWT
axios.defaults.headers['token']='jwtcode1237447785';

var vm = new Vue({
    el:'#app',
    data:{
        title : ' Axios 异步请求 ',
        list: []  // 所有笑话
    },
    methods:{
        async test1(){
            let url = 'https://autumnfish.cn/api/joke/list'
            // axios.get(url, {params:{ num: 3}} )
            //      .then( (ret)=>{
            //          console.log('结果',ret);
            //          this.list = ret.data.data ;
            //      })

            let ret = await axios.get(url, {params:{ num: 3}})
            this.list = ret.data.data
        },
        // 测试 POST 请求
        async test2(){
            let url ='/books';
            let params = new URLSearchParams();
            params.append("uname","longgui");
            params.append("pwd","666666");
            let ret = await axios.post(url, params)
            console.log( ret );
        },
        async test3(){
            let url ='/books/1010';
            let ret = await axios.delete(url)
            console.log( ret );
        },
        async test4(){
            let url ='/books/999';
            let ret = await axios.put(url,{stname:'dema',age:18})
            console.log( ret );
        }
    }
})
</script>

</html>